<template>
  <div>
    <el-card class="!border-none reactive el-card-client" shadow="never">
      <template #header>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-input
              v-model="queryParams.action"
              class="input_style"
              clearable
              placeholder="请输入搜索关键字"
            />
          </el-col>
          <el-col :span="8">
            <el-select
              v-model="queryParams.admin_id"
              placeholder="请选择数据员"
              clearable
            >
              <el-option
                v-for="item in informationPersonnel"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-button
              type="primary btn_style"
              @click="resetPage"
              color="#63ccba"
              class="mr_5"
            >
              <template #icon>
                <el-icon color="#fff">
                  <Search />
                </el-icon> </template
              >搜索
            </el-button>
          </el-col>
          <!-- <el-col :span="2" class="flex justify-end">
            <move-button></move-button>
          </el-col> -->
        </el-row>
      </template>
      <div>
        <el-table
          :data="pager.lists"
          border
          v-loading="pager.loading"
          stripe
          max-height="calc(100vh - 16rem)"
          class="mt_10"
        >
          <el-table-column
            label="操作"
            prop="action"
            align="center"
          ></el-table-column>
          <el-table-column label="时间" prop="create_time" align="center" />
        </el-table>
      </div>
      <div class="position">
        <pagination v-model="pager" @change="getLists" />
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup name="operate_log">
import { apiZgActivityOperateLogLists } from "@/api/zg_activity_operate_log";
import { adminList } from "@/api/perms/admin";
import { timeFormat } from "@/utils/util";
import feedback from "@/utils/feedback";
import { usePaging } from "@/hooks/usePaging";
import moveButton from "@/components/moveButton/index.vue";
const route = useRoute();

const informationPersonnel = ref([]);
const getDataLists = async () => {
  const res = await adminList({
    account: "",
    name: "",
    role_id: "",
    page_no: 1,
    page_size: 20,
  });
  informationPersonnel.value = res.lists;
};

console.log(informationPersonnel);

//路由标题
// 查询条件
const queryParams = reactive({
  action: "",
  activity_id: route.query.activity_id,
  admin_id: "",
});

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
  fetchFun: apiZgActivityOperateLogLists,
  params: queryParams,
});
getDataLists();
getLists();
</script>
<style lang="scss" scoped>
.reactive {
  position: relative !important;
}
.flex {
  display: flex !important;
}

.input_style {
  width: 100%;
}

.align_center {
  align-content: center;
  align-items: center;
  justify-content: left !important;
}
</style>
